<template>
  <el-table-column v-bind="$attrs" :formatter="wrapFormatter">
    <template v-if="$attrs.sslot" #default="{row,column,$index}">
      <slot :name="$attrs.sslot" v-bind:row="row" v-bind:column="column" v-bind:$index="$index"></slot>
    </template>
    <template  v-else-if="$attrs.stype == 'image'" #default="{row,column,$index}">
      <el-image v-if="ensureImageSrcIsString(rowValue(row,column,$index))"
          style="width: 25px; height: 25px"
          :src="ensureImageSrcIsString(rowValue(row,column,$index))"
          :preview-src-list="ensureImageSrcIsArray(rowValue(row,column,$index))">

        <i slot="error" class="el-icon-picture-outline"></i>

      </el-image>
      <div v-if="ensureImageSrcIsArray(rowValue(row,column,$index)).length > 1"> 共 {{ensureImageSrcIsArray(rowValue(row,column,$index)).length}} 张</div>

    </template>
    <template  v-else-if="$attrs.stype == 'link'" #default="{row,column,$index}">
      <el-link type="primary" target="_blank" :href="rowValue(row,column,$index)">{{ rowValue(row,column,$index) }}</el-link>
    </template>
    <template  v-else-if="$attrs.type == 'expand'" #default="{row,column,$index}">
      <StElDynamicForm :submit-props="{useDefault: false}" :datas="formatterRow(row)" :options="computedDynamicFormOptions" class="st-el-table-expand" :detail-mode="true"></StElDynamicForm>
    </template>
  </el-table-column>

</template>

<script>
import StElDynamicForm from './StElDynamicForm.vue'
export default {
  name: "StElTableColumn",
  components: {StElDynamicForm},
  props: {
    emptyCellValue: {}
  },
  inject: ['tableOptions'],
  computed: {
    computedDynamicFormOptions() {
      let r = []
      this.tableOptions.forEach(item=>{
        if (item.prop) {
          r.push({
            field:{
              name: item.prop
            },
            element: {
              type: item.stype || 'txt',
              label: item.label
            }
          })
        }

      })
      return r
    },
    // 以表格配置 prop为key的map对象
    propMap(){
      let r = {}
      this.tableOptions.forEach(item=>{
        if (item.prop) {
          r[item.prop] = item
        }
      })
      return r
    }
  },
  data() {
    return {
    }
  },
  methods: {
    // 获取 row 对应的值
    rowValue(row,column,$index) {
      let url = null
      if (this.$attrs.formatter) {
        url = this.wrapFormatter(row,column,this.$stObjectTools.getValue(row,this.$attrs.prop),$index)
        return url
      }
      url = this.$stObjectTools.getValue(row,this.$attrs.prop)
      return url
    },
    // 详情信息，支持table formatter 处理，只支持 row 参数
    formatterRow(row){
      if (!this.$stObjectTools.isEmpty(this.propMap)) {

        let newRow = null
        for (let propMapKey in this.propMap) {
          if(this.propMap[propMapKey].formatter){
            if (!newRow) {
              newRow = this.$stObjectTools.extend({},row)
            }
            newRow[propMapKey] = this.propMap[propMapKey].formatter(row)
          }
        }
        if (newRow) {
          return newRow
        }
      }

      return row
    },
    ensureImageSrcIsString(url){
      if(url){
        if(typeof url == 'string'){
          return url
        }else {
          // 做为数组处理,取第一个，在点击预览的时候，会展示多个
          return url[0]
        }
      }
      return url
    },

    ensureImageSrcIsArray(url){
      if(url){
        if(typeof url == 'string'){
          return [url]
        }else {
          // 做为数组处理,取第一个，在点击预览的时候，会展示多个
          return url
        }
      }
      return []
    },
    wrapFormatter(row, column, cellValue, index){
      if(cellValue === 0){
        return cellValue
      }
      let r = null
      if(this.$attrs.formatter){
        r = this.$attrs.formatter(row, column, cellValue, index)
      }

      if(!r){
        if(typeof cellValue == 'boolean'){
          r = cellValue ? '是' : '否'
        }
      }
      return r || cellValue || this.emptyCellValue
    }
  }
}
</script>

<style scoped>

</style>
<style>
.st-el-table-expand label {
  color: #99a9bf;
}
</style>